<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>授权展厅</title>
    <?php
	include 'public/views/header.php';
	include 'public/home/html/alert.php';
	?>
    <script src="public/home/js/function.js"></script>
    <script src="public/home/js/shopList.js"></script>
    <!-- 微信jssdk -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <!-- 腾讯mapjsapi -->
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=B2VBZ-2EX6K-SMYJE-AQZ4S-SAPY6-SQFLG"></script>
    <style>
        body{
            background-color: white;
            max-width:400px;
            margin:auto;
        }
        a{
            color:#333;
            text-decoration: none;
        }
        /*顶部，标题*/
    .head{
        width: 100%;
        height: 60px;
        background: #f2f2f2;
    }
    .head .col-xs-3,.head .col-xs-6{
        height:60px;
    }
    .head .col-xs-6{
        text-align: center;
    }
    .head .col-xs-3 img{
        height: 26px;
        width: 30px;
        margin-top: 17px;
    }
    .head .col-xs-6 img{
        height: 50px;
        width: auto;
         margin-top: 5px;
    }
        /*门店标题*/
        .title{
            height:60px;
            line-height: 60px;
            font-size: 18px;
            width:88%;
            margin-left: 6%;
        }
        /*搜索*/
        .search{
            height:50px;
            width:88%;
            margin-left: 6%;

        }
        .search-input i{
            font-size: 18px;
            color:#606060;
        }
        .search-input i:nth-child(2){
            float: right!important;
        }
        .search-input{
            border:1px solid #f1f1f2;
            border-radius: 4px;
            height:36px;
            margin-top:7px;
            /*background-color: red;*/
        }
        .search-input input{
            height:34px;
            width:80%;
            outline: none;
            background-color: white;
            border:none;
        }
        .search-button button{
            background-color: #293B46;
            color:white;
            font-size: 13px;
            border:none;
            outline: none;
            height:34px;
            width:60px;
            border-radius: 5px;
            margin:8px auto;
        }
        /*显示方式*/
        .show-type{
            width:88%;
            margin-left: 6%;
            height:60px;
            margin-top:20px;
        }
        .show-type-name{
            height: 30px;
            margin:15px auto;
            width:90px;
            line-height: 30px;
            text-align: center;
            /*border-bottom:2px solid #2F2F2F;*/
            color:#2F2F2F;
            font-weight: bold;
            padding: 0px;
        }
        .show-type-name img{
            height:20px;
            width:23px;
            margin-top:-3px;
            margin-right:10px;
        }
        .show-type-line{
            height:2px;
            background-color: #2F2F2F;
            width:70px;
            margin:-17px auto;
            position: relative;
            left:4px;
        }

        /*列表*/
        .shop-list{
            width:88%;
            margin-left: 6%;
            overflow-y: scroll;
            -webkit-overflow-scrolling:touch;
            /*background-color: red;*/
        }
        .shop-list-item{
            border-top:1px solid #F3F3F4;
            height:160px;
            margin:10px 0px;
            margin-bottom:0px;
            width:100%;
            color:#1E1E1E;
            /*background-color: red;*/
            padding-top:20px;
        }
        .shop-list-item-content{
            /*height:20px;*/
            /*line-height: 20px;*/
            margin-top:4px;
        }
        .shop-list-item img{
            height:21px;
            width:23px;
            margin-right:5px;
        }
        .shop-name{
            font-size:14px;
            font-weight: bold;
            height:20px;
        }
        .shop-share{
            float: right;
            display: none;
        }
        .shop-address{
            height:20px;
            line-height: 25px;
            color:#898989;
        }
        .shop-info{
            height:24px;
            width:70px;
            color:white;
            background-color: #293942;
            border-radius: 3px;
            outline: none;
            border:none;
            float: right;
        }

        /*地图*/
        .shop-map{
            width:100%;
            display: none;
            margin-top:10px;
        }
        .shop-box{
            text-align:center;white-space:nowrap;margin:10px;
        }
        .map-shop-info{
            width:70px;
            height:25px;
            line-height: 25px;
            font-size: 12px;
            color:white;
            background-color: #293942;
            outline: none;
            border:none;
            margin:auto;
            border-radius: 3px;
            margin-top:6px;
        }

        /*加载中*/
        .load{
            font-size: 45px;
            position: absolute;
            top:300px;
            margin-left: 45%;
        }


        /*分享*/
        .share-zhezhao{
            background:rgba(0,0,0,0.6);
            position: fixed;
            z-index:999;
            display: none;
            top:0px;
            left:0px;
        }
        .share-arrow{
            height:150px;
            width:150px;
            position: fixed;
            top:10px;
            right:10px;
            z-index: 1000;
            display: none;
        }
        .share-arrow i{
            font-size: 80px;
            color:white;
            float: right;
        }
        .share-arrow p{
            font-size: 14px;
            color:white;
            float: right;
            margin-top: 10px;
        }
        .share-box{
            height:200px;
            background-color: #fff;
            border-radius: 5px 5px 0px 0px;
            position: fixed;
            bottom: -200px;
            left:0px;
            right:0px;
            z-index:1000;
        }
        .share-item{
            height:130px;
            position: relative;
        }
        .share-cancel{
            height:70px;
        }
        .share-cancel button{
            height:50px;
            font-size: 18px;
            color:#888888;
            background-color: white;
            margin-top: 10px;
            border:none;
            outline: none;
            width:100%;
        }
        .share-icon{
            width:70px;
            height:70px;
            border-radius: 40px;
            background-color: #E1E1E1;
            margin:25px auto;
        }
        .share-icon img{
            height:40px;
            width:40px;
            border-radius: 30px;
            margin:15px;
        }
        .share-text{
            font-size: 13px;
            width:100%;
            text-align: center;
            margin-top: -15px;
            color:#333;
        }

    </style>
</head>
<body>
    <!-- demo -->
    <div class="shop-list-item-demo hide">
        <div class="shop-list-item">
            <div class="shop-list-item-content">
                <span class="shop-name"></span>
                <span class="shop-share"><img src="public/home/images/shop-share.png" alt="" /><u data-index="" onclick="shareShop(this)">分享</u></span>
            </div>
            <div class="shop-list-item-content">
                <div class="shop-address">
                    <img src="public/home/images/shop-address.png" alt="" />
                    <lable></lable>
                </div>
            </div>
            <div class="shop-list-item-content">
                <div class="shop-length">
                    <img src="public/home/images/shop-length.png" alt="" /><u>6.97km</u>
                </div>
            </div>
            <div class="shop-list-item-content">
                <?php if (!isNullOrEmpty($_SESSION[SESS_CONFIG][DicKey::RobotUrl[XPHEnum::Value]]['dic_value'])): ?>
                <img src="public/home/images/shop-robort.png" alt="" /><a class="robot" href="<?php echo $_SESSION[SESS_CONFIG][DicKey::RobotUrl[XPHEnum::Value]]['dic_value'] ?>"><u>智能问答</u></a>&nbsp;&nbsp;    
                <?php endif ?>
                
                <img src="public/home/images/shop-email.png" alt="" /><a class="leave-msg" href=""><u>邮箱</u></a>
            </div>
            <div class="shop-list-item-content">
                <button class="shop-info" data-id="" onclick="shopInfo(this)">店铺详情</button>
            </div>
        </div>
    </div>
    <input type="hidden" id="park_id" value="<?php echo $park_id ?>"/>
    <input type="hidden" id="map_mark" value="<?php echo $_SESSION[SESS_CONFIG][DicKey::MapMark[XPHEnum::Value]]['dic_value'] ?>"/>
    <!-- 头部标题（logo） -->
    <div class="head">
        <div class="col-xs-3"><img src="<?php echo base_url().'/public/home/images/pic/'?>detail.png" alt="" class="show-index"></div>
        <div class="col-xs-6"><img src="<?php echo $_SESSION[SESS_CONFIG][DicKey::Logo[XPHEnum::Value]]['dic_value'] ?>" alt=""></div>
        <div class="col-xs-3"></div>
    </div>
    <div class="title text-center"><?php echo $_SESSION[SESS_CONFIG][DicKey::ShopName[XPHEnum::Value]]['dic_value'] ?></div>
    <!-- 搜索产品型号 -->
    <div class="search">
        <div class="col-xs-9 search-input"><i class="icon-search"></i><input type="text" class="param" placeholder="输入城市或授权展厅名称" /><i class="icon-remove remove-param"></i></div>
        <div class="col-xs-3 search-button"><button>搜索</button></div>
    </div>
    <!-- 显示方式 -->
    <div class="show-type">
        <div class="col-xs-6">
            <div class="show-type-name" data-index="0"><img src="public/home/images/list.png" alt="" />展厅列表</div>
            <div class="show-type-line"></div>
        </div>
        <div class="col-xs-6">
            <div class="show-type-name" data-index="1"><img src="public/home/images/address.png" alt="" />地图查询</div>
            <div class="show-type-line" style="display: none;"></div>
        </div>
   	</div>
    <!-- 列表 -->
    <div class="shop-list show-type-content"></div>
    <!-- 地图 -->
    <div class="shop-map show-type-content" id="shop-map"></div>
    <i class="icon-spinner icon-spin load"></i>



    <!-- 分享 -->
    <div class="share-zhezhao"></div>
    <div class="share-arrow">
        <i class="icon-hand-up"></i>
        <p>点击菜单选择分享</p>
    </div>
    <div class="share-box">
        <div class="col-xs-6 share-item share-friend">
            <div class="share-icon" onclick="shareFriend()">
                <img src="public/home/images/wx-friend.png" alt="" />
            </div>
            <div class="share-text">微信好友</div>
        </div>
        <div class="col-xs-6 share-item share-friend-circle">
            <div class="share-icon" onclick="shareFriendCircle()">
                <img src="public/home/images/wx-friend.png" alt="" />
            </div>
            <div class="share-text">朋友圈</div>
        </div>
        <div class="col-xs-12 share-cancel">
            <button>取消</button>
        </div>
    </div>


        <!-- index iframe -->
        <div class="zhezhao" style="position:fixed; z-index:999; background: rgba(0,0,0,0.5); display: none; top:0px; left:0px;"></div>
        <iframe class="index-iframe" src="<?php echo base_url() ?>Home/Index/Index?park_id=<?php echo $_GET['park_id'] ?>" frameborder="0" style="position: fixed; z-index:1000; top:0px;"></iframe>
    </body>
    <script>
        $(function(){
            $('.index-iframe').css('left','-'+(Number($(window).width())*0.8)+'px').width(Number($(window).width())*0.8);
            setWindow();
            $(window).resize(function(){
                setWindow();
            });
            $('.show-index').click(function(){
                $('.zhezhao').show();
                $('.index-iframe').animate({left:'0px'});
            });
        })
        function setWindow(){
            $('.zhezhao').height($(window).height()).width($(window).width());
            $('.index-iframe').height($(window).height());
        }
    </script>
</html>